<template>
  <div>
    <van-nav-bar
      title="我的位置"
      left-text=""
      right-text="保存"
      left-arrow
      @click-left="backlink()"
      @click-right="savelocaiton"
    />
    <div style="display: flex; align-items: center">
      <van-cell
        title="我的位置"
        :value="userlocation"
        @click="showArea = true"
        class="locationcell"
      />
      <van-button
        size="mini"
        type="primary"
        @click="triggerClickLocation"
        style="min-width: 70px"
        >刷新定位</van-button
      >
    </div>
    <van-popup v-model:show="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onAreaConfirm"
        @cancel="showArea = false"
      />
    </van-popup>

    <baidu-map
      ref="baiduMap"
      class="bm-view"
      :center="locations"
      :zoom="15"
      :scroll-wheel-zoom="true"
      dragging
      @ready="handler"
    >
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <!-- <bm-control>
          <van-field v-model="keyword" center>
            <template #button>
              <van-button size="small" type="primary" @click="searchclub">
                搜索
              </van-button>
            </template>
          </van-field>
        </bm-control>
        <bm-marker
          v-for="marker of markers"
          :key="marker"
          :position="{ lng: marker.lng, lat: marker.lat }"
          :icon="{
            url: makerincon,
            size: { width: 50, height: 50 },
          }"
        >
        </bm-marker> -->
    </baidu-map>
  </div>
</template>

<script>
import makerincon from "../assets/logo.png";
import { areaList } from "@vant/area-data";
import { useStore } from "@/store/index.js";
import { showToast } from "vant";
export default {
  data() {
    return {
      locations: {},
      BMap: null,
      map: null,
      center: "",
      zoom: 0,
      userlocation: "",
      markers: [],
      makerincon,
      listloading: false,
      finished: false,
      showArea: false,
      keyword: "",
      searchlocation: "",
      areaList,
    };
  },

  methods: {
    handler({ BMap, map }) {
      // 保存百度地图类
      this.BMap = BMap;
      this.map = map;
      this.locations = {};
      const geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition((res) => {
        this.locations.lng = res.point.lng;
        this.locations.lat = res.point.lat;
      });
    },
    clickLocation(e) {
      this.locations.longitude = e.point.lng;
      this.locations.latitude = e.point.lat;
      const BMapGL = this.BMap;
      const map = this.map;
      // map.clearOverlays();
      const marker = new BMapGL.Marker(
        new BMapGL.Point(e.point.lng, e.point.lat)
      );
      map.addOverlay(marker);
      const geoc = new BMapGL.Geocoder();
      geoc.getLocation(e.point, (rs) => {
        const addressComp = rs.addressComponents;
        this.userlocation =
          addressComp.province +
          "/" +
          addressComp.city +
          "/" +
          addressComp.district;
        // addressComp.street +
        // addressComp.streetNumber;
      });
    },
    triggerClickLocation() {
      this.clickLocation({
        point: new this.BMap.Point(this.locations.lng, this.locations.lat),
      });
    },
    onAreaConfirm(value) {
      this.userlocation = value.selectedOptions
        .map((item) => item.text)
        .join("/");
      this.showArea = false;
    },
    savelocaiton() {
      if (this.userlocation !== null && this.userlocation !== "") {
        const store = useStore();
        const userinfo = store.getUserStoreinfo;
        userinfo.currentcity = this.userlocation;
        userinfo.locations = this.locations;
        store.setUserinfo(userinfo);
        showToast("保存成功");
      } else {
        showToast("保存失败");
      }
    },
    backlink() {
      this.$router.back();
    },
    getcity() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      if (userinfo !== null && userinfo !== undefined) {
        if (userinfo.currentcity == null || userinfo.currentcity == undefined) {
          this.userid = userinfo.id;
          this.userlocation = userinfo.city;
        } else {
          this.userlocation = userinfo.currentcity;
        }
      } else {
        showToast("请先登录或者登录已失效");
      }
    },
  },
  mounted() {
    this.getcity();
  },
};
</script>
<style scoped>
.bm-view {
  height: 300px;
  width: 100%;
}
</style>

<style>
.locationcell .van-cell__value {
  flex: 1.5;
}
</style>